<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0" />

        <!-- PrimeVue -->
        <!-- <link href="https://unpkg.com/primevue@^3/resources/themes/saga-blue/theme.css" rel="stylesheet" />
        <link href="https://unpkg.com/primevue@^3/resources/primevue.min.css" rel="stylesheet" />
        <link href="https://unpkg.com/primeflex@^3/primeflex.min.css" rel="stylesheet" />
        <link href="https://unpkg.com/primeicons/primeicons.css" rel="stylesheet" /> -->

        <link href="../libs/primevue/resources/themes/lara-light-indigo/theme.css" rel="stylesheet" />
        <link href="../libs/primevue/resources/primevue.min.css" rel="stylesheet" />
        <link href="../libs/primeflex/primeflex.min.css" rel="stylesheet" />
        <link href="../libs/primeicons/primeicons.css" rel="stylesheet" />

        <!-- Dependencies -->
        <!-- <script src="https://unpkg.com/vue@next"></script> -->
        <script src="../libs/vue/vue.global.js"></script>
        <!-- <script src="https://unpkg.com/primevue@^3/core/core.min.js"></script> -->
        <script src="../libs/primevue/core/core.min.js"></script>

        <!-- Demo -->
        <!-- <script src="https://unpkg.com/primevue@^3/calendar/calendar.min.js"></script> -->
        <script src="../libs/primevue/calendar/calendar.min.js"></script>
    </head>
    <body>
        <div id="app">
            <h5>Popup</h5>
            <div class="p-fluid grid formgrid">
                <div class="field col-12 md:col-4">
                    <label for="basic">Basic</label>
                    <p-calendar id="basic" v-model="date1" autocomplete="off" @date-select="dateSelect($event)"></p-calendar>
                </div>
                <div class="field col-12 md:col-4">
                    <label for="dateformat">DateFormat</label>
                    <p-calendar id="dateformat" v-model="date2" date-format="mm-dd-yy"></p-calendar>
                </div>
                <div class="field col-12 md:col-4">
                    <label for="icon">Icon</label>
                    <p-calendar id="icon" v-model="date3" :show-icon="true"></p-calendar>
                </div>
                <div class="field col-12 md:col-4">
                    <label for="minmax">MinMax</label>
                    <p-calendar id="minmax" v-model="date4" :min-date="minDate" :max-date="maxDate" :manual-input="false"></p-calendar>
                </div>
                <div class="field col-12 md:col-4">
                    <label for="disableddays">Disabled Days</label>
                    <p-calendar id="disableddays" v-model="date5" :disabled-dates="invalidDates" :disabled-days="[0,6]" :manual-input="false"></p-calendar>
                </div>
                <div class="field col-12 md:col-4">
                    <label for="multiple">Multiple</label>
                    <p-calendar id="multiple" v-model="dates1" selection-mode="multiple" :manual-input="false"></p-calendar>
                </div>
                <div class="field col-12 md:col-4">
                    <label for="range">Range</label>
                    <p-calendar id="range" v-model="dates2" selection-mode="range" :manual-input="false"></p-calendar>
                </div>
                <div class="field col-12 md:col-4">
                    <label for="buttonbar">Button Bar</label>
                    <p-calendar id="buttonbar" v-model="date6" :show-button-bar="true"></p-calendar>
                </div>
                <div class="field col-12 md:col-4">
                    <label for="time24">Time / 24h</label>
                    <p-calendar id="time24" v-model="date7" :show-time="true" :show-seconds="true"></p-calendar>
                </div>
                <div class="field col-12 md:col-4">
                    <label for="time12">Time / 12h</label>
                    <p-calendar id="time12" v-model="date8" :time-only="true" hour-format="12"></p-calendar>
                </div>
                <div class="field col-12 md:col-4">
                    <label for="monthpicker">Month Picker</label>
                    <p-calendar id="monthpicker" v-model="date9" view="month" date-format="mm/yy"></p-calendar>
                </div>
                <div class="field col-12 md:col-4">
                    <label for="yearpicker">Year Picker</label>
                    <p-calendar id="yearpicker" v-model="date10" view="year" date-format="yy"></p-calendar>
                </div>
                <div class="field col-12 md:col-4">
                    <label for="multiplemonths">Multiple Months</label>
                    <p-calendar id="multiplemonths" v-model="date11" :number-of-months="3" :responsive-options="responsiveOptions"></p-calendar>
                </div>
                <div class="field col-12 md:col-4">
                    <label for="datetemplate">Date Template</label>
                    <p-calendar id="datetemplate" v-model="date12">
                        <template #date="slotProps">
                            <strong v-if="slotProps.date.day > 10 && slotProps.date.day < 15" class="special-day">{{slotProps.date.day}}</strong>
                            <template v-else>{{slotProps.date.day}}</template>
                        </template>
                    </p-calendar>
                </div>
                <div class="field col-12 md:col-4">
                    <label for="touchUI">TouchUI</label>
                    <p-calendar id="touchUI" v-model="date13" :touch-u-i="true"></p-calendar>
                </div>
            </div>

            <h5>Inline</h5>
            <p-calendar v-model="date14" :inline="true" :show-week="true"></p-calendar>
        </div>

        <script type="module">
        const { createApp, ref, watch } = Vue;

        const App = {
            setup() {
                let today = new Date();
                let month = today.getMonth();
                let year = today.getFullYear();
                let prevMonth = (month === 0) ? 11 : month -1;
                let prevYear = (prevMonth === 11) ? year - 1 : year;
                let nextMonth = (month === 11) ? 0 : month + 1;
                let nextYear = (nextMonth === 0) ? year + 1 : year;

                const minDate = ref(new Date());
                const maxDate = ref(new Date());
                const invalidDates = ref();
                const date1 = ref(new Date());
                const date2 = ref();
                const date3 = ref();
                const date4 = ref();
                const date5 = ref();
                const date6 = ref();
                const date7 = ref();
                const date8 = ref();
                const date9 = ref();
                const date10 = ref();
                const date11 = ref();
                const date12 = ref();
                const date13 = ref();
                const date14 = ref();
                const dates1 = ref();
                const dates2 = ref();
                const responsiveOptions = ref([
                    {
                        breakpoint: '1400px',
                        numMonths: 2
                    },
                    {
                        breakpoint: '1200px',
                        numMonths: 1
                    }
                ]);

                minDate.value.setMonth(prevMonth);
                minDate.value.setFullYear(prevYear);
                maxDate.value.setMonth(nextMonth);
                maxDate.value.setFullYear(nextYear);

                let invalidDate = new Date();
                invalidDate.setDate(today.getDate() - 1);
                invalidDates.value = [today, invalidDate];

                watch(date1, (newValue, oldValue) => {
                  console.log('date1 watch:', newValue, oldValue);
                });
                function dateSelect(value) {
                  console.log('date1 selected:', value);
                }

                return { minDate, maxDate, invalidDates, date1, date2, date3, date4, date5, date6, date7,
                    date8, date9, date10, date11, date12, date13, date14, dates1, dates2, responsiveOptions, dateSelect }
            },
            components: {
                "p-calendar": primevue.calendar
            }
        };

        createApp(App)
            .use(primevue.config.default)
            .mount("#app");
        </script>

        <style>
        .special-day {
            text-decoration: line-through;
        }
        </style>

    </body>
</html>